<template>
  <div class="home-wrapper">
    <div class="list_box">
      <el-card shadow="always" :body-style="{ padding: '0px' }">
        <div style="padding-left:10px;border-bottom:1px solid #eee">
          <el-select @change="selectChanged" v-model="selectData" collapse-tags multiple placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="dateArr"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
          <el-button type="success">批量报警处理</el-button>
        </div>
        <div class="list_item">
          
        </div>
      </el-card>
    </div>
    <el-card class="right_sb" shadow="always" :body-style="{ padding: '0px' }">
      <div class="list_item">
        <div class="title">设备列表</div>
        <div class="scroll_box">
          <EleTree v-if="isTree" :treeData="treeData" v-on:listenToChildEvent="changeList" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import EleTree from "@/components/tree/EleTree.vue";
import Map from "@/components/map/proMap.vue";
export default {
  name: "Home",
  components: { EleTree, Map },
  data() {
    return {
 
      input: "",
      isTree:false,
      treeData:[],
      choseId:'',
      userInfo:{},
      dateArr:[],
      options:[],
        selectData:''
    };
  },
  mounted(){
    this.treeData = JSON.parse(localStorage.getItem('treeData'));
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
    this.isTree = true;
    this.choseId = this.treeData[0].children[0].label;
    //this.getHistoryData();
    this.getFactorOption();
  },
  methods: {
    //获取下拉数据
    getFactorOption(){
      this.axios
        .request({
          method: "get",
          url: "http://47.104.26.124:8080/zhny/data/getFactorOption",
          params: {
            userId: this.userInfo.id,
            address:this.choseId,
          },
        })
        .then((res) => {
          this.options = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //下拉数据修改监听
    selectChanged(res){
      console.log(res)  //['1-2', '2-1', __ob__: Observer]
    },
    //获取实时数据
    getHistoryData(){
      this.axios
        .request({
          method: "POST",
          url: "http://47.104.26.124:8080/zhny/data/getHistoryData",
          params: {
            userId: this.userInfo.id,
            address:this.choseId,
            factorIds:'',
            startTime:'',
            endTime:'',
          },
        })
        .then((res) => {
          console.log(res);
          
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //监听树状图点击事件，切换数据源
    changeList(res) {
      this.choseId = res.label;
      //this.getHistoryData();
    },
  },
};
</script>

<style scoped lang="less">
@import "../../assets/less/home";
.home-wrapper {
  position: relative;
  .list_box {
    margin-top: 20px;
    width: calc(100% - 250px) !important;
    height: calc(100% - 50px);
    float: left;
    padding: 0;
    /deep/.el-card__body{
      height: 100%;
    }
    .list_item{
      height: calc(100% - 52px);
    }
  }
  .right_sb{
    position: absolute;
    right: 0;
    top: 20px;
    width: 240px;
    height: calc(100% - 50px);
    /deep/.el-card__body{
      height: 100%;
    }
    .list_item{
      height: 100%;
    }
    .scroll_box{
      height: calc(100% - 30px);
    }
  }
  .el-button {
    margin: 10px 10px;
  }
}
.el-select{
  margin-right: 10px;
}
</style>
